/*
 * @Author: your name
 * @Date: 2020-05-11 16:01:19
 * @LastEditTime: 2020-09-16 11:06:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /yigo/src/Utils/ListItem.js
 */

 import React, { Component } from 'react'
 import { Text, View,TextInput, StyleSheet } from 'react-native'
 import { Picker, DatePicker, SegmentedControl, List} from '@ant-design/react-native';

import { getTime } from '../Utils/Util'
 export default class ListItem extends Component {

    static defaultProps = {
        data: []
    }

    constructor(props) {
        super(props)
        
    
        this.state = {
            pickerValue: props.defaultValue || [],   //省市区域
            CreditCode:  props.defaultValue || '',      //统一社会信用代码
        }
        
    }
    success(info, value) {
        let { data, onOk } = this.props;
        switch (info.type) {
            case 'EstimatedDate':
            case 'CreateTime':
            case 'date':
            case 'SigningDate':
            case 'TransfeTime':
            case 'BillDate':
            case 'OppDate':
                //时间戳
                let timeSecond = value.getTime().toString();
                //时间 2019 02-23
                let timeStr = getTime(timeSecond);
                onOk({timeSecond, timeStr})
                break;
            case 'Province': 
                this.setState({pickerValue: value})
                onOk(value)
                break;
        
            default:
                //默认是单项选择器
                if (value.length === 1) {   //确保是单项选择器
                        for (const obj of data) {
                            if (obj.value === value[0]) {
                                //找到了这个值  吐出去
                                let temp = {value:value[0],label:obj.label}
                                //如果选择的是客户名称，则附带上联系人
                                if (info.type === 'CustomerName') {
                                    temp.Contacts = obj.Contacts; 
                                }
                                //如果是伙伴名称，整体对象都返回出去
                                if (info.type === 'ChannelName') {
                                    temp = {...obj}
                                }
                                onOk(temp)
                            }
                        }
                }
                break;
        }
    }
    
    render() {
        
        let {info, onChangeText, editing, defaultValue, data, segmentChange, selectedIndex, title, nextPage} = this.props   
        
        

        let valued = ''     //默认值
        let selectIndex;    //默认索引
        switch (info.type) {
                // case 'creator':
                case 'allPerson':
                case 'Founder':  
                case 'EmployeeName':

                valued = userInfo.name;  
                break;
                case 'creatorDepartment':
                case 'Department':
                case 'allPersonDepartment':
                valued = userInfo.orgname;  
                break;

                case 'IsChannel':
                case 'IsCentral':{  //如果是  是否渠道,是否央企，则布尔值取反
                    selectIndex = selectedIndex == 0 ? 1 : 0;
                } break;
            default:
                if (typeof defaultValue === 'number') {
                    valued = defaultValue.toString();
                } else {
                    valued = defaultValue;                    
                }
                
                selectIndex = selectedIndex;
                
                break;
        }     
        {/*
            info.typeNumber   
            0: 固定有值得<Text>   
            1: 文本框填写的<TextInput>   
            2: 点击选择的   
            3: TextInput 多行输入的 
            4: datePicker  
            5: 分段选择器 [男,女]
            6: 点击 push下一页选择的
            7: 省,市 两级联动选择器
        */}
        let temp = (info.type === 'CreateTime' ||        //创建客户时间
                    info.type === 'BillDate' && (info.title === '单据日期:' || info.title === '商机日期:') ||        //回款业绩记录:单据日期 
                    info.type === 'ReportDate' ||        //销售记录详情:提交日期  
                    info.type === 'CustomerStatus' ||    //客户: 客户状态 
                    (info.type === 'EstimatedDate' && info.title === '填报日期:') ||        //销售记录详情:填报日期 
                    (info.type === 'OpportunityStartDate' || info.type === 'opportunityValidity')  ||  //商机起始日期和截止日期
                    (info.type === 'StartDate' || info.type === 'Validity')  ||  //客户起始日期和截止日期
                    info.type === 'OpportunityStatus'     ||//商机状态
                    info.type === 'IsPermanent'      // 客户详情: 是否永久有效
                    )
                    
        if (editing && temp) return  <></>


        
        
        return (
            <View style={[{flexDirection:'row', alignItems:'center', padding:10,marginLeft:8,marginRight:8,marginTop:8,backgroundColor:'white',borderRadius:5,justifyContent:'space-between'},info.typeNumber != 3 && {height:44}]}>
                <View style={{flexDirection:'row'}}>
                    {info.must&&<Text style={{color:'red'}}>*</Text>}
                    <Text style={[{color:'#202020'},info.typeNumber === 3 && {width: 140}]}>{info.title}</Text>
                </View>
                

                {info.typeNumber === 0 ?
                 <Text style={{color:'#202020',flex:1,textAlign:'right'}}>{valued}</Text> :
                 info.typeNumber === 1 ?
                 <TextInput
                    value={info.type === 'CreditCode' && this.state.CreditCode}
                    defaultValue={valued} 
                    editable={editing}
                    keyboardType = {info.keyboardType}
                    textAlign='right' 
                    placeholderTextColor='gray' onChangeText={(text) => {
                        let value = '';
                        if (info.type === 'CreditCode') {
                            value = text.toUpperCase();
                            this.setState({CreditCode: value})
                        } else {
                            value = text;
                        }
                        onChangeText(info.type,value)
                    }}
                    autoCapitalize='characters'
                    underlineColorAndroid='transparent'
                    clearButtonMode='while-editing'
                    placeholder='请输入...' 
                    style={{flex:1,height:30,paddingTop: 0,paddingBottom: 0,color:'#202020'}}></TextInput> :
                 
                info.typeNumber === 2 ? 
                ((data.length > 0) ? 
                  <Picker
                    title={title || "请选择"}
                    disabled={!editing}
                    data={data}
                    cols={1}
                    value={this.state.pickerValue}
                    onChange={(v) => this.setState({ pickerValue: v },() => {console.log("");
                    })}
                    onOk={(value) => this.success(info,value)}>
                     <Text style={valued ? {color:'#202020'} : {color:'#808080'}}> {valued || '请选择>' }</Text>
                 </Picker> : 
                 <Text style={{color:'#808080'}}>无数据可以选择</Text>
                 ) : 
                 info.typeNumber === 3 ?
                 <TextInput 
                      {...this.props}
                       multiline={true}
                       editable={editing}
                       placeholderTextColor='gray' onChangeText={(text) => onChangeText(info.type,text)}
                       style={[styles.textInputStyle]}/> : 
                info.typeNumber === 4 ?
                <DatePicker
                    value={this.state.value}
                    mode="date"
                    title="请选择日期"
                    disabled={!editing}
                    defaultDate={new Date()}
                    minDate={new Date(2015, 7, 6)}
                    maxDate={new Date(2026, 11, 3)}
                    onOk={(value) => this.success(info,value)}
                    format="YYYY-MM-DD">
                       <Text style={valued ? {color:'#202020'} : {color:'#808080'}}> {valued || '请选择时间>' }</Text>
                    </DatePicker> : 
                    info.typeNumber === 5 ? 
                        <SegmentedControl
                        tintColor={themeColor}
                        style={{width: 100,height: 30}}
                        values={data}
                        disabled={!editing}
                        selectedIndex={selectIndex}
                        onChange={segmentChange || null}/> :
                        
                    info.typeNumber === 6 ?
                    <Text onPress={() => editing && nextPage(info)} style={valued ? {color:'#202020'} : {color:'#808080'}}> {valued || '请选择>' }</Text> : 
                    info.typeNumber === 7 ?
                    <Picker
                        data={data}
                        cols={2}
                        disabled={!editing}
                        value={this.state.pickerValue}
                        onChange={(v) => this.setState({ pickerValue: v })}
                        onOk={(value) => this.success(info,value)}>
                            <Item/>
                    </Picker> : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    textInputStyle: {
        flex:1,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius:5,
        backgroundColor: '#fff',
        color:'#202020',
        padding: 8,
    },
});

class Item extends Component {
    render() {
        let {onPress, extra} = this.props;        
        return (
            <Text onPress={onPress} style={[extra != "请选择" ? {color:'#202020'} : {color:'#808080'},{fontSize:15}]}> {extra}</Text>   
        );
    }
}